<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Person Search</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    h1 {
      text-align: center;
    }

    #searchContainer {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }

    #searchInput {
      padding: 10px;
      width: 300px;
      font-size: 16px;
    }

    #searchButton {
      padding: 10px 20px;
      font-size: 16px;
      margin-left: 10px;
      cursor: pointer;
    }

    #resultsContainer {
      margin-top: 20px;
    }

    .person {
      border: 1px solid #ddd;
      padding: 15px;
      margin-bottom: 10px;
      border-radius: 5px;
      background-color: #f9f9f9;
    }

    .person h3 {
      margin: 0;
      font-size: 18px;
    }

    .person p {
      margin: 5px 0;
      font-size: 14px;
      color: #555;
    }

    .no-results {
      text-align: center;
      font-size: 18px;
      color: #888;
    }
  </style>
</head>
<body>
<h1>Person Search</h1>

<!-- 搜索框和按钮 -->
<div id="searchContainer">
  <form action="" id = "myForm">
    <label for="tele">用户名或电话号码:</label>
    <input type="text" id="tele" name="tele" >


    <label for="userName" style="text-align:center">用户名:</label>
    <input type="userName" id="userName" name="userName" >
    <input type="submit" value="提交">

  </form>

</div>

<!-- 查询结果显示区域 -->
<div id="resultsContainer"></div>

<script>


  const resultsContainer = document.getElementById('resultsContainer');



  function serializeJsonToQueryString(jsonData) {
    return Object.keys(jsonData)
            .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(jsonData[key])}`)
            .join('&');
  }

  // 渲染结果到页面
  function renderResults(results) {
    resultsContainer.innerHTML = ''; // 清空之前的查询结果

    if (results.length === 0) {
      resultsContainer.innerHTML = '<p class="no-results">No results found.</p>';
      return;
    }

    results.forEach(person => {
      const personDiv = document.createElement('div');
      personDiv.classList.add('person');

      personDiv.innerHTML = `
                    <h3>${person.userName}</h3>
                    <p><strong>部门:</strong> ${person.dept.deptName}</p>
                    <p><strong>电话号码:</strong> ${person.tele}</p>
                `;

      resultsContainer.appendChild(personDiv);
    });
  }

  document.getElementById('myForm').addEventListener('submit', function (event) {
    // 阻止默认的表单提交行为
    event.preventDefault();

    // 获取表单数据
    const formData = new FormData(event.target);
    console.log(formData)

    const jsonData = {};


    // 遍历表单数据并构建 JSON 对象
    formData.forEach((value, key) => {
      jsonData[key] = value;
    });


    let s = serializeJsonToQueryString(jsonData);



    fetch('/api/user/querybydeptid?' + s, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      },

    })
            .then(response => {
              if (!response.ok) {
                throw new Error('Network response was not ok');
              }
              return response.json();
            })
            .then(result => {
              renderResults(result);
            })
            .catch(error => {
              console.error('Error:', error);
              alert('An error occurred while fetching data.');
            });
  });


  // 将表单数据转换为 JSON 的函数
  function formToJson(formElement) {
    const formData = new FormData(formElement);
    const jsonData = {};

    // 遍历表单数据并构建 JSON 对象
    formData.forEach((value, key) => {
      jsonData[key] = value;
    });

    return jsonData;
  }


</script>
</body>
</html>
